<template>
  <div class='settingPage'>
    <com-header
      right-icon='icon'>
      <div class="titleText textColor" slot='title'>Setting</div>
    </com-header>
    <div class="setWrap">
      <div class="avatar" :style="{backgroundImage:`url(${imageUrl})`}">
        <el-upload
          class='input-file'
          action="http://dev.upload.famlink.co/upload/fileUpload/oss"
          list-type="picture-card"
          name="ico_upload"
          :before-upload="beforeAvatarUpload"
          :limit=1
          :on-error='_handleUploadFail'
          :on-progress='_handleUploadProg'
          :on-success="_handleUploadSuccess"
          :data='upData'>
        </el-upload>
      </div>
      <div class="setList" @click='_handleSetName'>
        <div class="setName">Nickname</div>
        <div class="setShow">{{isnickname}}</div>
      </div>
      <div class="setList" @click="sheetVisible = true">
        <div class="setName">Gender</div>
        <div class="setShow">{{isGender}}</div>
      </div>
      <!--<div class="setList" @click='_handleSeBirthday'>-->
        <!--<div class="setName">Birthday</div>-->
        <!--<div class="setShow">{{isBirthday}}</div>-->
      <!--</div>-->
      <div class="setList" @click='_handleFeedback'>
        <div class="setName">Feedback</div>
        <div class="setShow setIcon"></div>
      </div>
      <div class="setList" @click='_handleAbout'>
        <div class="setName">About</div>
        <div class="setShow setIcon"></div>
      </div>
      <div class="setList" @click='_handleLogout'>
        <div class="setName">Log out</div>
        <div class="setShow setIcon"></div>
      </div>
    </div>
    <mt-actionsheet
      :actions="action"
      cancelText='Cancel'
      v-model="sheetVisible"></mt-actionsheet>
  </div>

</template>

<script>
  import ComHeader from '../../components/common/Header'
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'
  import { formatDate } from '../../plugins/utils'
  import CalcuMD5 from '../../plugins/md5'
  import { MessageBox } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined

  export default {
    layout: 'other',
    components: { ComHeader },
    asyncData() {
      return {}
    },
    data() {
      return {
        isBirthday:'',
        isnickname: '',
        isGender: '',
        sheetVisible: false,
        imageUrl: '',
        action: [{
          name: 'Male',
          method: () => this._handleSeGender(1,'Male')
        }, {
          name: 'Female',
          method: () => this._handleSeGender(2,'Female')
        }, {
          name: 'Trans',
          method: () => this._handleSeGender(3,'Trans')
        }, {
          name: 'Prefer not to say',
          method: () => this._handleSeGender(0,'Prefer not to say')
        }],
        upData: {
          cid: 'paramida-debug-system_djy',
          os: 'IOS-9.3.2',
          network: 1,
          appkey: 'com.raindrop.link',
          appv: '1.1.0-dev',
          sdkv: '1.1.0',
          country: '1.0.0',
          lang: 'zh-CN',
          time: (new Date()).valueOf(),
          local_time: formatDate(new Date().getTime()),
          req_id: Math.random() + (new Date()).valueOf(),
          resolution: '',
          manufacturer: '',
          channel: 'test',
          timezone: -8
        }
      }
    },
    created() {
    },
    mounted() {
      const userInfo = JSON.parse(Cookie.get('userInfo'))
      this.imageUrl = userInfo.avatar
      this.isnickname = userInfo.name
      this.isBirthday = userInfo.birthday

      const gender = userInfo.gender
      if(gender == 0){
        this.isGender = 'Prefer not to say'
      }
      if(gender == 1){
        this.isGender = 'Male'
      }
      if(gender == 2){
        this.isGender = 'Female'
      }
      if(gender == 3){
        this.isGender = 'Trans'
      }
    },
    methods: {
      // 修改名字
      _handleSetName() {
        MessageBox.prompt('Nickname', '',
          {
            cancelButtonText: 'Cancel',
            confirmButtonText: 'Confirm',
            cancelButtonClass: 'cencelClass'
          }
        ).then(({ value, action }) => {
          if (3 < value.length < 14) {
            this.isnickname = value
            const parmas = {
              sid: Cookie.get('sid'),
              nickname: value
            }
            this._handleUpload(parmas)
          } else {
            Toast('3-14 characters')
          }
        }).catch(() => {
          return
        })
      },

      //设置性别
      _handleSeGender(gender,item) {
        this.isGender = item
        const parmas = {
          sid: Cookie.get('sid'),
          gender: gender
        }
        this._handleUpload(parmas)
      },
      _handleSeBirthday() {
      },
      _handleFeedback() {
      },
      _handleAbout() {
      },
      _handleLogout() {
        this.$router.push({path:'/login/0'})
      },
      //上传头像之前签名
      beforeAvatarUpload(file) {
        const isLt10M = file.size / 1024 / 1024 < 10
        if (!isLt10M) {
          Toast('Picture size should not exceed 10Mb!')
          return
        }
        const sign = CalcuMD5('http://dev.upload.famlink.co/upload/fileUpload/oss', this.upData, 'post')
        this.upData.sign = sign
      },

      //上传成功的回调
      _handleUploadSuccess(res) {
        const imgUrl = res.data.url
        this.imageUrl = imgUrl
        const parmas = {
          sid: Cookie.get('sid'),
          avatar: imgUrl
        }
        this._handleUpload(parmas)

      },

      //上传进度
      _handleUploadProg(eve) {
        console.log(eve.percent)
      },

      //上传失败的回调
      _handleUploadFail() {
        Toast({
          message: 'Upload failure!',
          iconClass: 'icon icon-error'
        })
      },
      async _handleUpload(parmas) {
        const res = await api.setChangeInfo(parmas)
        console.log(res)
        if (res.status == 0) {
          // this.$router.push({ path: '/login/3' })
        } else {
          Toast(res.info)
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .cencelClass {
    color: #999;
  }

  .settingPage {
    width: 100%;
    height: 100%;

    .setWrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .avatar {
        width: 174px;
        height: 174px;
        border-radius: 50%;
        background: url("") no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
        margin: 68px 0 50px 0;
        position: relative;

        .input-file {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          cursor: pointer;
        }
      }

      .setList {
        width: 100%;
        height: 106px;
        display: flex;
        color: #333333;
        font-size: 36px;
        font-weight: bold;
        line-height: 106px;
        padding: 0 50px;
        justify-content: space-between;
        align-items: center;

        .setName {
          color: #666666;
        }

        .setShow {
          max-width: 400px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .setIcon {
          width: 27px;
          height: 16px;
          background: url("../../assets/images/6.png") no-repeat center;
          -webkit-background-size: 100%;
          background-size: 100%;
          transform: rotate(-90deg);
        }
      }
    }
  }

</style>
